<%@ page language="java" contentType="text/html; charset=utf-8"
	pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<%@ taglib prefix="s" uri="/struts-tags" %>
<%@taglib prefix="sj" uri="/struts-jquery-tags" %>
<%@ page import="com.AAL.Model.*" %>
<%@ page import="java.util.List" %>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-gb" lang="en-gb" dir="ltr">
<head>
<sj:head compressed="false" />
<sj:head jqueryui="true" jquerytheme="redmond" />
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <link rel="shortcut icon" type="image/x-icon" href="images/wheel.jpg" />
    <title>Trang dang ki tai khoan</title>
    <link rel="stylesheet" href="css/constant.css" type="text/css" />
    <link rel="stylesheet" href="css/template.css" type="text/css" />
    <link rel="stylesheet" href="css/virtuemart.css" type="text/css" />
    <link rel="stylesheet" href="css/screen.css" type="text/css" />
    <link rel="stylesheet" href="css/jquery.validate.password.css" type="text/css" />
     <link rel="stylesheet" href="css/form.css" type="text/css" />
  <link rel="stylesheet" href="css/validationEngine.jquery.css" type="text/css"/>
  <link rel="stylesheet" href="css/register.css" type="text/css" />
    <script  type="text/javascript" src="js/jquery.validate.js"></script>
     <script type="text/javascript" src="js/jquery.validate.password.js" ></script>
 		<script src="js/jquery.validationEngine-en.js" type="text/javascript" charset="utf-8">
        </script>
        <script src="js/jquery.validationEngine.js" type="text/javascript" charset="utf-8">
        </script>
        <script>
            jQuery(document).ready(function(){
                // binds form submission and fields to the validation engine
                jQuery("#frmRegister").validationEngine('attach');
                
            });
        </script>
    <script  type="text/javascript">
$(document).ready(function() {
	// validate signup form on keyup and submit
	var validator = $("#frmRegister").validate({
		rules: {			
			password: {
				password: "#username"
			}
		},
		// the errorPlacement has to take the table layout into account
		errorPlacement: function(error, element) {
			error.prependTo( element.parent().next() );
		}
	});
	
	function checkUserName(){
		username = $("#username").val();
		
		feildLength = username.length;
		ex="/^[0-9a-zA-Z]+$/";
		var pattern = new RegExp(ex);		
		
		if(feildLength >= 6 && feildLength <=30 && !pattern.test(username)){
			$("#msgboxNick").removeClass().addClass('messagebox').text('Đang kiểm tra...').fadeIn("show");
			$.getJSON('Account_preRegister_step4.action',{uName: username}, function(data) {						
				if(data.checkUsername==false){						
					$("#msgboxNick").fadeTo(200,0.1,function()
							{ 							  
								$(this).removeClass('messagebox').addClass('messageboxerror').text('Tài khoản này đã được sử dụng !').fadeTo(900,1);
								$("#username").focus();
							});	
						return false;
					}
					else if(data.checkUsername==true){	
						$("#msgboxNick").fadeTo(200,0.1,function()
								{ 
								  $(this).removeClass('messagebox').removeClass('messageboxerror');
								  $(this).text('');	
								});
						return true;
						/*
						$("#msgboxNick").fadeTo(200,0.1,function()
								{ 
								  $(this).removeClass('messageboxerror');
								  $(this).addClass('messageboxok').text('Ban co the dung tai khoan nay').fadeTo(900,1);	
								  $(this).fadeOut(10000);
								});
						return true;
						*/
					}				
			});
		}
	};
	
	
	$("#username").focusout(function(){	
			checkUserName();	
		});
	
	
function checkOnlyEmail(){
		
		email = $("#email").val();
		feildLength = email.length;
		ex="/^[a-zA-Z][\w\.-]*[a-zA-Z0-9]@[a-zA-Z0-9][\w\.-]*[a-zA-Z0-9]\.[a-zA-Z][a-zA-Z\.]*[a-zA-Z]$/";
		var pattern = new RegExp(ex);		
		
		if(feildLength >= 0 && feildLength <=99 && !pattern.test(email)){
			$("#msgboxEmail").removeClass().addClass('messagebox').text('Đang kiểm tra...').fadeIn("show");
			$.getJSON('Account_preRegister_step5.action',{cEmail: email}, function(data) {						
				if(data.checkEmail==false){						
					$("#msgboxEmail").fadeTo(200,0.1,function()
							{ 							  
								$(this).addClass('messageboxerror').text('Email này đã được sử dụng!').fadeTo(900,1);
								$("#email").focus();
							});	
						return false;
					}
					else if(data.checkEmail==true){	
						$("#msgboxEmail").fadeTo(200,0.1,function()
								{ 
								  $(this).removeClass();
								  $(this).text('');	
								});
						return true;						
					}				
			});
		}
	};
	
    $("#email").focusout(function(){	
    	checkOnlyEmail();    		
	});
    
    $("#btnReset").click(function(){
    	jQuery('#frmRegister').validationEngine('hideAll');
    	  $("#msgboxNick").removeClass();;
    	  $("#msgboxEmail").removeClass();
    });    
    
		
	});
    
    

    
</script>
<style type="text/css">
.messagebox{
	position:absolute;
	width:auto;	
	margin-top:5px;
	margin-left:30px;
	border:1px solid #c93;
	background:#ffc;
	padding:5px 20px;
	box-shadow: 0 0 6px #000;
	-moz-box-shadow: 0 0 6px #000;
	-webkit-box-shadow: 0 0 6px #000;
	padding: 4px 10px 4px 10px;
	border-radius: 6px;
	-moz-border-radius: 6px;
	-webkit-border-radius: 6px;
	
}
.messageboxok{

	position:absolute;
	width:auto;
	margin-left:0px;
	margin-top:5px;
	border:1px solid #349534;
	background:#C9FFCA;
	padding:5px 20px;
	font-weight:bold;
	color:#008000;	
}
.messageboxerror{
	/* position:absolute;
	width:auto;
	margin-left:0px;
	margin-top:5px;
	border:1px solid #CC0000;
	background:#F7CBCA;
	padding:5px 20px;
	font-weight:bold;
	color:#CC0000;
	*/
	
	display: block;
	cursor: pointer;
	width: 100%;	
	background: #ee0101;
	position:relative;
	z-index:5001;
	color: #fff;
	width: 200px;
	font-family: tahoma;
	font-size: 13px;
	border: 2px solid #ddd;
	box-shadow: 0 0 6px #000;
	-moz-box-shadow: 0 0 6px #000;
	-webkit-box-shadow: 0 0 6px #000;
	padding: 4px 10px 4px 10px;
	border-radius: 6px;
	-moz-border-radius: 6px;
	-webkit-border-radius: 6px;
	margin-top:5px;
	margin-left:0px;
}
</style>
                                                               
    </head>
<body id="body">
    <div class="main">
        <div class="borderTop">
            <div class="borderLeft">
                <div class="borderRight">
                    <div class="borderBottom">
                        <div class="cornerTopLeft">
                            <div class="cornerTopRight">
                                <div class="cornerBottomLeft">
                                    <div class="cornerBottomRight">
                                        <div class="width">
                                            <jsp:include page="header.jsp" />
                                            <div id="nav">
                                                <jsp:include page="menu.jsp" />
                                            </div>
                                            <div class="one_column_main">
                                             	<s:form id="frmRegister" name="frmRegister" action="Account_finishRegister" method="post" theme="simple"
	cssClass="yform">
                                                <div class="container">
                                                    <div class="bloc04">
                                                        <h2 style="padding: 10px ;">
                                                            Đăng kí tài khoản</h2>
                                                        <div class="bloc05">
                                                            <div align="right" class="note_label">
                                                                <em>Các trường đánh dấu (<span class="note_text">*</span>) là bắt buộc nhập.</em></div>
                                                            <div id="registerbloc">
                                                               
                                                                <div id="contentRegister" style="width: 95%;">
                                                                     <div class="register" style="width: 100%;">
                                                                       
                                                                        <fieldset style="border: solid 1px black; margin-bottom: 10px; width: 100%; border-color: #CCCCCC;">
            																<legend style="margin-left: 17px;font-size:17px; font-weight: bold;color: #256BB1;"> Thông tin đăng nhập</legend>
                                                                        
                                                                        <table style="margin-top: 10px; margin-bottom: 10px;" cellspacing="0" cellpadding="0" width="100%" border="0">
                                                                            <tbody>
                                                                                <tr id="sUserName_tr">
                                                                                    <td align="right" class="width_25">
                                                                                        <p id="sUserName_label">
                                                                                            Tên đăng nhập <span class="note_text">*</span></p>
                                                                                    </td>
                                                                                    <td class="width_35">
                                                                                        <span id="sUserName_readonly" style="font-weight: bold; display: none"></span><span
                                                                                            class="sp_input" id="sUserName_input">
                                                                                            <input  maxlength="50" name="account.userName" id="username"
                                                                                                value="" tabindex="0" class="validate[required,length[6,20],custom[onlyLetterNumber]] txt_260" /></span>
                                                                                    </td>
                                                                                   <td style="background-color: #FFFFFF" valign="top" class="status"><span id="msgboxNick" style="display:none"></span></td>
                                                                                </tr>
                                                                                <tr id="sPassWord1_tr">
                                                                                    <td align="right">
                                                                                        <p id="sPassWord1_label">
                                                                                            Mật khẩu <span class="note_text">*</span></p>
                                                                                    </td>
                                                                                    <td class="width_35">
                                                                                        <span class="sp_input">
                                                                                        	<input id="sPassword" class="validate[required,length[6,20]] txt_260" name="password" type="password" maxlength="50" value="" />
                                                                                        	                                                                                            
                                                                                        </span>
                                                                                        
                                                                                    </td>
                                                                                    <td class="status" style="background-color: #FFFFFF" id="sPassWord1_tr_note" valign="top">
                                                                                        <div class="password-meter">
																		  					<div class="password-meter-message">&nbsp;</div>
																		  					<div class="password-meter-bg">
																			  					<div class="password-meter-bar"></div>
																		  					</div>
																		  				</div>
                                                                                    </td>
                                                                                </tr>
                                                                                <tr id="sConfirm_PassWord1_tr">
                                                                                    <td align="right">
                                                                                        <p id="sConfirm_PassWord1_label">
                                                                                            Nhập lại mật khẩu <span class="note_text">*</span></p>
                                                                                    </td>
                                                                                    <td class="width_35">
                                                                                        <span class="sp_input">
                                                                                            <input class="validate[required,length[6,20],confirm[sPassword]] txt_260" id="password_confirm"  type="password"
                                                                                                maxlength="32" name="password_confirm" tabindex="0" />
                                                                                        </span>
                                                                                    </td>
                                                                                    <td style="background-color: #FFFFFF" valign="top" class="status"></td>
                                                                                </tr>
                                                                            </tbody>
                                                                        </table>
                                                                        </fieldset>
                                                                    </div>
                                                                    <div class="register2" style="margin-top: 0px; width: 100%;">                                                                       
                                                                         <fieldset style="border: solid 1px black; margin-bottom: 10px; width: 100%; border-color: #CCCCCC;">
            																<legend style="margin-left: 17px;font-size:17px; font-weight: bold;color: #256BB1;"> Thông tin cá nhân</legend>
                                                                     
                                                                        <table cellspacing="0" cellpadding="0" width="100%" border="0" style="margin: 10px 0px;">
                                                                            <tbody>
                                                                                <tr>
                                                                                    <td align="right" class="width_25">
                                                                                        <p>
                                                                                            Tên công ty <span class="note_text">*</span>
                                                                                        </p>
                                                                                    </td>
                                                                                    <td class="width_35">
                                                                                        <span class="sp_input">
                                                                                            <input type="text" tabindex="0" value="" class="validate[required,length[0,49]] txt_260" maxlength="50" id="lastName"
                                                                                                name="account.dealer.companyName" />
                                                                                                
                                                                                        </span>
                                                                                    </td>
                                                                                    <td style="background-color: #FFFFFF" id="sUserName_tr_note" valign="top">
                                                                                    </td>
                                                                                </tr>
                                                                                <tr>
                                                                                    <td align="right">
                                                                                        <p id="dName1_label">
                                                                                            Quy mô của công ty:
                                                                                        </p>
                                                                                    </td>
                                                                                    <td class="width_35" style="height: 30px;">   
                                                                                   <s:url id="lnkAccount_preRegister_step3" action="Account_preRegister_step3" />
																					<sj:select href="%{lnkAccount_preRegister_step3}" id="scale" name="account.dealer.scale.scaleID"
																						indicator="indicator3" cssClass="validate[required] txt_260" headerKey="-1" headerValue="Chọn quy mô công ty"
																						list="lstScales" listKey="scaleID" listValue="scaleDealer" effectDuration="30000"
																						/>
                                                                                         <img id="indicator3" 
																							src="images/indicator.gif" 
																							alt="Loading..." 
																							style="display:none"/>
                                                                                    	
                                                                                       </td>
                                                                                    <td style="background-color: #FFFFFF" id="sUserName_tr_note" valign="top">
                                                                                    </td>
                                                                                </tr>
                                                                                <tr>
                                                                                    <td align="right" class="width_25">
                                                                                        <p>
                                                                                            Địa chỉ <span class="note_text">*</span>
                                                                                        </p>
                                                                                    </td>
                                                                                    <td class="width_35">
                                                                                        <span class="sp_input">
                                                                                            <input type="text" tabindex="0" value="" class="validate[required,length[0,99]] txt_260" maxlength="100" id="firstName"
                                                                                                 name="account.accountInformation.address" />
                                                                                        </span>
                                                                                    </td>
                                                                                    <td style="background-color: #FFFFFF" id="sUserName_tr_note" valign="top">
                                                                                    </td>
                                                                                </tr>
                                                                                <tr>
                                                                                    <td align="right">
                                                                                        <p id="dName1_label">
                                                                                            Vùng miền:
                                                                                        </p>
                                                                                    </td>
                                                                                    <td class="width_35" style="height: 30px;">   
                                                                                    <s:url id="lnkAccount_preRegister_step1" action="Account_preRegister_step1" />
																					<sj:select href="%{lnkAccount_preRegister_step1}" id="region" name="region"
																						onChangeTopics="reloadCities" indicator="indicator" cssClass="validate[required] txt_260" headerKey="-1" headerValue="Chọn vùng miền"
																						list="lstRegion" listKey="regionID" listValue="regionName" effectDuration="30000"
																						/>
                                                                                         <img id="indicator" 
																							src="images/indicator.gif" 
																							alt="Loading..." 
																							style="display:none"/>
                                                                                    	
                                                                                       </td>
                                                                                    <td style="background-color: #FFFFFF" id="sUserName_tr_note" valign="top">
                                                                                    </td>
                                                                                </tr>
                                                                                <tr>
                                                                                    <td align="right">
                                                                                        <p id="dName1_label">
                                                                                            Thành phố: 
                                                                                        </p>
                                                                                    </td>
                                                                                    <td class="width_35" style="height: 30px;">   
                                                                                    	<s:url id="lnkAccount_preRegister_step2" action="Account_preRegister_step2" />
																						<sj:select href="%{lnkAccount_preRegister_step2}" id="city" effectDuration="3000"
																						 reloadTopics="reloadCities" indicator="indicator1" cssClass="validate[required] txt_260"
																						list="lstCities" listKey="cityID" listValue="cityName" name="account.accountInformation.city.cityID"/>
																						<img id="indicator1" 
																							src="images/indicator.gif" 
																							alt="Loading..." 
																							style="display:none"/>                                                                              
                                                                                    	
                                                                                    	 
                                                                                       </td>
                                                                                    <td style="background-color: #FFFFFF" id="sUserName_tr_note" valign="top">
                                                                                    </td>
                                                                                </tr>
                                                                                <tr>
                                                                                    <td align="right" class="width_25">
                                                                                        <p>
                                                                                            Điện thoại công ty:<span class="note_text">*</span>
                                                                                        </p>
                                                                                    </td>
                                                                                    <td class="width_35">
                                                                                        <span class="sp_input">
                                                                                            <input type="text"  class="validate[required,length[0,20],custom[phone]] txt_260"  id="homephone"
                                                                                                name="account.accountInformation.homePhone"  />
                                                                                        </span>
                                                                                     </td>
                                                                                     <td style="background-color: #FFFFFF" id="sUserName_tr_note" valign="top">
                                                                                      </td>
                                                                                </tr>
                                                                                <tr>
                                                                                    <td align="right" class="width_25">
                                                                                        <p>
                                                                                            Telephone
                                                                                        </p>
                                                                                    </td>
                                                                                    <td class="width_35">
                                                                                        <span class="sp_input">
                                                                                            <input type="text"   class="validate[length[0,20],custom[phone]] txt_260" maxlength="100" id="tel"
                                                                                                name="account.accountInformation.telephone" />
                                                                                        </span>
                                                                                    </td>
                                                                                    <td style="background-color: #FFFFFF" id="sUserName_tr_note" valign="top">
                                                                                    </td>
                                                                                </tr>
                                                                                
                                                                                <tr>
                                                                                    <td align="right" class="width_25">
                                                                                        <p>
                                                                                            Email<span class="note_text">*</span>
                                                                                        </p>
                                                                                    </td>
                                                                                    <td class="width_35">
                                                                                        <span class="sp_input">
                                                                                            <input type="text" value="" class="validate[required,length[0,99],custom[email]]  txt_260"  id="email"  maxlength="100"
                                                                                                name="account.accountInformation.email" />
                                                                                        </span>
                                                                                    </td>
                                                                                    <td style="background-color: #FFFFFF" valign="top" class="status"><span id="msgboxEmail" style="display:none"></span>
                                                                                    </td>
                                                                                </tr>                                                                               
                                                                            </tbody>
                                                                        </table>
                                                                        </fieldset>
                                                                    </div>
                                                                   
                                                                     
                                                                   
                                                                    <div style="padding: 5px 0 15px 0;">
                                                                        Nếu bạn đồng ý tạo tài khoản, điều đó có nghĩa rằng bạn đã chấp nhận các điều khoản của công ty. <a target="_blank"
                                                                            href="#">Điều khoản</a></div>
                                                                    <div class="btnact">
                                                                        <s:submit  cssClass="btncreateacc"  value="" 
                                                                          action="Account_finishRegister" />
                                                                         <input type="reset" id="btnReset" class="btnreset"  value="" style="margin-left: 10px;" />
                                                                       
                                                                    </div>
                                                                    
                                                                </div>
                                               				
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <strong></strong>
                                                </div>
												                  
                                                </s:form>    
                                            </div>                                            
                                            <jsp:include page="footer.jsp" />
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
</body>
</html>

